<script setup>

import DropDownItem from "./drop-down-item.vue";
import {useIndexStore} from "../store";
const store = useIndexStore();

</script>

<template>
  <div class="w-full h-[44px] bg-[rgb(181,152,181)] flex items-center justify-between *:m-1 text-white">
    <div class="flex items-center *:m-1 text-white">
      <div class="h-full w-6 flex items-center">
        <img :src="store.menu_item.icon" alt="" />
      </div>
      <div class="m-0 p-0">{{ store.menu_item.title }}</div>
    </div>
    <div class="flex justify-between items-center *:m-1">
      <div class="w-6">
        <img src="/search.svg" alt="" />
      </div>
      <div class="w-6">
        <img src="/menu.svg" alt="" />
      </div>
    </div>
  </div>
  <template v-for="menu in store.menu_item.children">
    <div @click="store.menu_flag(menu)"
         class="w-full h-[40px] flex items-center *:m-1 justify-between hover:bg-gray-200 text-[12px] m-1">
      <div class="flex items-center">
        <div v-if="menu.icon" class="h-full w-6 flex items-center">
          <img src="/src/assets/talk.svg" alt="" />
        </div>
        <div>{{ menu.title }}</div>
      </div>
      <div>
        <div class="h-full w-6 flex items-center">
          <img v-if="menu.flag === false" class="w-4" src="/bottom_black.svg" alt="" />
          <img v-else-if="menu.flag === true" class="w-4" src="/up.svg" alt="" />
        </div>
      </div>
    </div>
    <drop-down-item v-if="menu.flag" :menu="menu.children" />
  </template>
</template>

<style scoped>

</style>